<div style="width:100%">
    <div class="card-component">
        <span *ngIf="properties.leftIconClassName !== ''">
            <i class="left-icon" [ngClass]="getLeftIconClassNames()"></i>
        </span>
        <div class="content">
            <div>
                <label class="title" [style.color]="properties.titleColor" [style.font-size]="properties.titleFontSize">{{ properties.title }}</label>
            </div>
            <div *ngIf="properties.subTitle !== ''">
                <label class="sub-title" [style.color]="properties.subTitleColor" [style.font-size]="properties.subTitleFontSize">{{ properties.subTitle }}</label>
            </div>
        </div>
        <div class="right-icon" *ngIf="properties.rightIconClassName !== ''">
            <i [ngClass]="getRightIconClassNames()"></i>
        </div>
    </div>
    <div class="footer-container">
        <label class="footer">{{ footer }}</label>
    </div>
</div>